<template>
  <el-form ref="userRef" :model="company" :rules="rules" label-width="80px">
    <el-form-item label="公司名称" prop="name">
      <el-input v-model="company.name" maxlength="30"/>
    </el-form-item>
    <el-form-item label="联系方式" prop="phone">
      <el-input v-model="company.phone" maxlength="11"/>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="company.email" maxlength="50"/>
    </el-form-item>
    <el-form-item label="公司简介" prop="description">
      <el-input type="textarea" v-model="company.intro" maxlength="50"/>
    </el-form-item>
    <el-form-item label="公司地址" prop="address">
      <el-input type="textarea" v-model="company.address" maxlength="50"/>
    </el-form-item>
    <el-form-item label="营业执照">
      <div class="demo-image__preview">
        <el-image
            style="width: 100px; height: 100px"
            :src=props.company.licence
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :initial-index="4"
            fit="cover"
        />
      </div>
    </el-form-item>
    <el-form-item label="新营业执照">
      <el-upload action="#" list-type="picture-card" :auto-upload="false" :file-list="fileList"
                 @change="handleFileChange">
        <el-icon>
          <Plus/>
        </el-icon>
      </el-upload>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit">保存</el-button>
      <el-button type="danger" @click="close">关闭</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import {updateUserProfile, uploadAvatar, updateCompany, uploadCompanyLicence} from "@/api/system/user";
import {onMounted} from "vue";

const url = "";
const props = defineProps({
  company: {
    type: Object,
    default: () => ({})
  }
});
const {proxy} = getCurrentInstance();
const rules = ref({
  name: [{required: true, message: "公司名称不能为空", trigger: "blur"}],
  email: [{required: true, message: "邮箱地址不能为空", trigger: "blur"}, {
    type: "email",
    message: "请输入正确的邮箱地址",
    trigger: ["blur", "change"]
  }],
  phone: [{required: true, message: "联系方式不能为空", trigger: "blur"}, {
    pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
    message: "请输入正确的联系方式",
    trigger: "blur"
  }],
});

const fileList = reactive([]); // 使用 reactive 管理 fileList 的状态

function handleFileChange(file, newFileList) {
  fileList.splice(0, fileList.length, ...newFileList); // 保持 fileList 引用不变
}

/** 提交按钮 *
 *
 */
async function submit() {
proxy.$refs.userRef.validate(async valid => {
  if (valid) {
    try {
      // Create a FormData object to hold the files
      const formData = new FormData();
      if (fileList.length > 0) {
        for (const file of fileList) {
          formData.append('file', file.raw);
        }
        // Upload the files using multipart request
        await uploadCompanyLicence(formData);
      }



      // Then save the company information
      await updateCompany(props.company);
      proxy.$modal.msgSuccess("修改成功");
      location.reload();
    } catch (error) {
      proxy.$modal.msgError("操作失败");
    }
  }
});


}


/** 关闭按钮 */
function close() {
  proxy.$tab.closePage();
}
</script>
<style scoped>
.demo-image__error .image-slot {
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>
